<template>
  <div class="login-bg">
    <div class="login-screen">
      <div class="logo">欢迎登录</div>
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="username" class="var-field-input-placeholder"
            >用户名</label
          >
          <input
            type="text"
            id="username"
            v-model="username"
            required
            autocomplete="off"
          />
        </div>
        <div class="form-group">
          <label for="password" class="var-field-input-placeholder">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            required
            autocomplete="off"
          />
        </div>
        <div class="form-group-btn">
          <loginButton name="登录" @clickLogin="submitForm"></loginButton>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
// 导入vue的路由
import { useRouter } from 'vue-router';
const router = useRouter();
import { ref } from 'vue';

import loginButton from './components/loginButton.vue';
const username = ref('');
const password = ref('');

function submitForm() {
  // TODO: Add your login logic here
  console.log(username.value, password.value);
  router.push('/home');
}
</script>

<style lang="less">
.login-bg {
  position: relative;
  width: 100%;
  height: 100%;
  // 三个渐变色 #07d5e0 #7e6fee #ed0efd
  background: linear-gradient(to right, #07d5e0, #7e6fee, #ed0efd);
  background-size: 100% 100%;
}

.login-screen {
  position: absolute;
  top: 200px;
  right: 200px;
  width: 300px;
  max-height: 400px;
  padding: 50px 20px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.logo {
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  position: relative;
  width: 300px;
  margin-bottom: 20px;

  &-btn {
    margin-top: 40px;
  }
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input:focus {
  outline: none;
  box-shadow: 0 0 3px #66c2a5;
}

button {
  padding: 10px;
  color: #fff;
  cursor: pointer;
  background-color: #428bca;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #3071a9;
}
</style>
